<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/12/30
  Time: 9:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <%--<script src="jquery-2.1.0.js"></script>--%>
</head>
<body>
<%--搜索模块--%>
<div class="layui-form-item" style="padding: 10px">
    <form class="layui-form" id="sss" >
        <div class="layui-form-item">
            <label class="layui-form-label">入库人</label>
            <div class="layui-input-inline">
                <input type="text" name="staffName" placeholder="请输入入库人名称" class="layui-input">
            </div>
            <label class="layui-form-label">经手人</label>
            <div class="layui-input-inline">
                <input type="text" name="jsr" placeholder="请输入经手人名称"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">起始时间</label>
            <div class="layui-input-inline">
                <input type="date" name="onTime" placeholder="请输入起始时间"  class="layui-input">
            </div>
            <label class="layui-form-label">截止时间</label>
            <div class="layui-input-inline">
                <input type="date" name="offTime" placeholder="请输入截止时间"  class="layui-input">
            </div>
            <button type="button" class="layui-btn " lay-submit lay-filter="ssbtu">搜索</button>
            <button type="reset" class="layui-btn layui-btn-normal layui-btn-ss">重置</button>
        </div>
    </form>
</div>
<%--详情模块--%>
<div id="addDeptDiv" style="display: none">
    <table id="test2" class="layui-hide"  lay-filter="test2" ></table>
    <form class="layui-form" lay-filter="xq" >
        <div class="layui-form-item">
            <label class="layui-form-label">入库时间:</label>
            <div class="layui-input-inline">
                <input type="text" name="rdate"  class="layui-input" readonly>
            </div>
            <label class="layui-form-label">总金额:</label>
            <div class="layui-input-inline">
                <input type="text" name="totalprice" class="layui-input" readonly>
            </div>
            <label class="layui-form-label">入库人:</label>
            <div class="layui-input-inline">
                <input type="text" name="staffName" class="layui-input" readonly>
            </div>
        </div>
    </form>
</div>
<%--头部工具栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

    </div>
</script>
<table id="test" class="layui-hide"  lay-filter="test" ></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
</script>
<script>
    layui.use(['table','layer','form','jquery'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form  = layui.form;
        function showtable(){
            table.render({
                elem:'#test'
                ,url:'${pageContext.request.contextPath}/ruku/list'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: 't_ruku'
                ,cols: [[
                     {field:'rukuid', title:'入库ID', hide:true}
                    ,{field:'rdate', title:'入库时间',sort: true}
                    ,{field:'totalprice', title:'入库总金额'}
                    ,{field:'totalcount', title:'入库总数量'}
                    ,{field:'jsr', title:'经手人'}
                    ,{field:'staffName',title:'入库人'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                , even: true //开启隔行背景
                ,limit:5//每页显示的条数
                ,limits:[2,5,10,15,20]
            });
        }
        table.render({
            elem:'#test2'
            ,url:'${pageContext.request.contextPath}/ruku/xiangqing'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: 't_ruku'
            ,cols: [[
                {field:'rdid', title:'ID',hide:true}
                ,{field:'rukuid', title:'入库ID',hide:true}
                , {field:'bookname', title:'书名'}
                ,{field:'author', title:'作者'}
                ,{field:'publisher', title:'出版社'}
                ,{field:'count', title:'入库数量'}
                ,{field:'pushprice', title:'入库单价'}
            ]]
            ,page: true
            , even: true //开启隔行背景
            ,limit:5//每页显示的条数
            ,limits:[2,5,10,15,20]
        });
        //当页面整个加载完成时，执行的方法
        $(function(){
            showtable();
        })

        form.on('submit(ssbtu)',function (data){
            table.reload('test',{
                where:{
                    staffName:data.field.staffName,
                    jsr:data.field.jsr,
                    onTime:data.field.onTime,
                    offTime:data.field.offTime
                },
                page: {
                    curr:1
                }
            });
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '查看详情'
                    ,maxmin: true
                    ,anim: 4
                    ,area:['700px','350px']
                    ,content: $("#addDeptDiv")
                });
                form.val("xq",data);
            }
            table.reload('test2',{
                where:{
                    rukuid:data.rukuid,
                }
            });
        });
    });
</script>
</body>
</html>
